<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>easyUpload.js</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/bs_switch.css" />
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
    <link href="css/upload.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie-1.4.1.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type='text/javascript' src='js/jquery.form.js'></script>


</head>

<body>
    <div class="container">
        <div class="row" id="abc">
            <div class="col-md-12 ">

                <div class="form-group">
                    <!-- label表示文字提示标签,可以通过表单的组建的id提示-->
                    <label class="col-md-2 control-label"><strong>课件名称(课件名):</strong></label>
                    <div class="col-md-4">
                        <input class="form-control" id="coursewarename" v-model="coursewarename" type="text" value="" />
                    </div>
                </div>
                <div class="form-group">

                    <div><strong>课程分类:</strong>&nbsp;
                        <select id="course" v-model="selected">
                        <label>
                            <option name="course" value="0">请选择</option>
                        </label>
                    </select>
                    </div>
                </div>

                <div class="form-group">

                    <div><strong>格式:</strong>&nbsp;
                        <label><input name="format" type="radio" value="1" v-model="formate"/>图文 </label>
                        <label><input name="format" type="radio" value="2" v-model="formate"/>视频 </label>
                        <label><input name="format" type="radio" value="3" v-model="formate"/>音频 </label>
                        <label><input name="format" type="radio" value="4" v-model="formate"/>文件 </label>
                    </div>
                </div>
                <div class="form-group">
                    <!-- label表示文字提示标签,可以通过表单的组建的id提示-->
                    <label class="col-md-2 control-label"><strong>封面图片:</strong></label>
                    <input class="btn btn-success " type="submit" id="fclick" value="上传图片" />
                    <input class="btn btn-warning " type="reset" value="删除图片" /><br>
                    <input type="file" onchange="change(this)" id="bookImg" name="bookImg"> <br/>
                    <img id="upLoadImg" style="height:50px; width: 50px;" v-bind:src="imgUrl" />
                </div>

                <div class="form-group">
                    <table class="table table-bordered table-hover">
                        <tr>
                            <td width="27%">文件名</td>
                            <td width="27%">状态</td>
                            <td width="30%">操作</td>
                            <td width="16%">静态资源访问路径</td>
                        </tr>
                        <tr id="tre">
                            <td width="27%">{{fileName}}</td>
                            <td width="27%">已经上传</td>
                            <td width="30%"><input class="btn btn-warning " type="submit" id="delfile" @click="delfile()" value="删除" /></td>
                            <td width="16%">{{filepath}}</td>
                        </tr>
                    </table>
                </div>

                <!---------------------------------------------->

                <div id="upbt">
                    <div id="btn"><input type="button" class="uploadbtn" value="选择文件" onClick="uploadphoto.click()" id="select"><input type="button" value="开始上传" id="ups"></div>
                </div>
                <div style="width:940px;margin:10px auto;   overflow:hidden; margin-top:10px;">
                    <form id='myupload' method='post' enctype='multipart/form-data'>
                        <input type="file" id="uploadphoto" name="uploadfile" value="请点击上传图片" style="display:none" onChange="filesize(this)" />
                    </form>

                    <table width="100%" border="0" id="table" cellpadding="1" cellspacing="1">
                        <tr bgcolor="#4a5464" align="center">
                            <td width="27%">文件名</td>
                            <td width="27%">文件大小</td>
                            <td width="30%">上传进度</td>
                            <td width="16%">操作</td>
                        </tr>
                        <tr id="list" style="background:url(img/bg.jpg); display:none;" align="center">
                            <td>
                                <div id="text"></div>
                            </td>
                            <td>
                                <div id="big"></div>
                            </td>
                            <td>
                                <div id="uped">等待上传</div>
                            </td>
                            <td><a href="javascript:viod(0)" id="del">移除</a></td>
                        </tr>
                    </table>
                    <!--<div id="text"></div>
                  <div class="imglist"> </div>
                  <p class="res"></p> -->
                </div>
                <div class="form-group">
                    <!-- label表示文字提示标签,可以通过表单的组建的id提示-->
                    <label class="col-md-2 control-label"><strong>课件时长(分):</strong></label>
                    <div class="col-md-4">
                        <input class="form-control" id="time" type="text" v-model="time" value="" />
                    </div>
                </div>

                <div class="form-group">
                    <!-- label表示文字提示标签,可以通过表单的组建的id提示-->
                    <label class="col-md-2 control-label"><strong>课件简介:</strong></label>
                    <div class="col-md-6">
                        <textarea class="" id="description" v-model="description" rows="5">
                        </textarea>
                    </div>
                </div>

                <div class="form-group device-switch switch">
                    <div><strong>可下载:</strong>&nbsp;
                        <label><input name="isDownload" type="checkbox" class="bs_switch" value="1" v-model="isDownload"
                                  data-on="启用" data-off="开启"></label>
                    </div>
                </div>
                <input class="btn btn-success " type="submit" @click="submit()" value="立即提交" />&nbsp;&nbsp;&nbsp;
                <input class="btn btn-default " type="button" value="重置" />
                </form>
            </div>
        </div>
    </div>


    <!-- 上传图片 -->
    <script type="text/javascript">
        function change(img) {
            var file = img.files[0];
            //获取一个指向该元素的地址
            var path = window.URL.createObjectURL(file);
            console.log(path);
            $("#upLoadImg").attr('src', path);

        }

        //js获取
        var inputTag = document.getElementById("bookImg");
        var img = inputTag.files[0];


        $("#fclick").click(function() {
            if ($("#bookImg").val() == '') {
                return;
            }

            //注意这里不能写错。。。
            var file = $("#bookImg")[0].files[0];
            console.log(file);
            var formData = new FormData();
            formData.append("upload", file);
            //对文件类型进行判断
            var index = file.name.lastIndexOf(".");
            var type = file.name.substring(upload);
            if (type != ".jpg" && type != ".png") {
                alert("只能上传jpg和png格式的图片！！");
                return;
            }
            $.ajax({
                url: "/course/upload/uploadImage",
                data: formData,
                type: "post",
                //这两个属性必须设置！！！！
                contentType: false,
                processData: false,
                success: function(data) {
                    if (data.code == 200) {
                        alert("添加成功！")
                    } else {
                        alert("添加失败！")
                    }
                }
            })
        });
    </script>


    <script>
        /**
         * select元素动态添加option
         *
         * @param selectEleId select元素id
         * @param width 要添加的option的value属性值
         * @param height 要添加的option的innerHTML
         * @param selected 是否选中
         */
        function addOption(selectEleId, optionValue, optionInnerHTML, selected) {
            var selectEle = document.getElementById(selectEleId);
            var optionObj = document.createElement("option");
            optionObj.value = optionValue;
            optionObj.innerHTML = optionInnerHTML;
            optionObj.selected = selected;
            optionObj.name = "course";
            selectEle.appendChild(optionObj);
        }

        var cwid = window.location.href.split("=")[1]; //截取字符串
        var storage = window.localStorage;
        var token = storage.getItem("token");
        var refreshToken = storage.getItem("refreshToken");
        var tempName;
        var tempformat;
        var app = new Vue({
            el: "#abc",
            data() {
                return {
                    coursewarename: "",
                    selected: 0,
                    formate: 0,
                    imgUrl: "",
                    time: "",
                    description: "",
                    isDownload: 1,
                    fileName: "",
                    filepath: ""
                };
            },

            mounted() {
                window.findover = this.findover; // 方法赋值给window
                axios.get(
                    "/course/courseCategory/all", {
                        headers: {
                            'Content-Type': 'application/json;charset=UTF-8',
                            "token": token,
                            "refreshToken": refreshToken
                        },
                    }).then(res => {
                    console.info(res.data)
                    if (res.data.code == 200) {
                        console.info(res.data.data);
                        var data = res.data.data;
                        for (var i = 0; i < data.length; i++) {
                            var id = data[i].categoryId;
                            var name = data[i].categoryName;
                            addOption("course", id, name, false);
                        }
                    } else {
                        alert("失败！")
                    }
                })
                let data = {
                    "cwid": cwid
                }
                axios.post(
                    "/course/courseware/findCoursewareByCwid", data, {
                        headers: {
                            'Content-Type': 'application/json;charset=UTF-8',
                            "token": token,
                            "refreshToken": refreshToken
                        },
                    }).then(res => {
                    if (res.data.code == 500) {
                        location.href = "/error/500.html";
                    }
                    if (res.data.code == 200) {
                        console.log(res.data);
                        this.coursewarename = res.data.data.cwname;
                        tempName = res.data.data.cwname;
                        this.selected = res.data.data.category;
                        var temp = res.data.data.format
                        tempformat = temp;
                        if (temp == "mp3") {
                            this.formate = 3;
                        } else if (temp == "png" || temp == "jpg") {
                            this.formate = 1;
                        } else if (temp == "mp4") {
                            this.formate = 2;
                        } else {
                            this.format = 4
                        }
                        this.imgUrl = "http://117.51.156.132/images/"+res.data.data.cover;
                        this.time = res.data.data.duration;
                        this.description = res.data.data.description;
                        this.isDownload = res.data.data.isDownload;
                        this.fileName = this.coursewarename + "." + temp;
                        this.filepath = "http://117.51.156.132/file/" + this.fileName;
                    }
                });

            },
            methods: {

                submit() {
                    if (tempName != this.coursewarename) {
                        var params = new URLSearchParams();
                        params.append("newFileName", this.coursewarename);
                        params.append("oldName", this.fileName);
                        axios.post(
                            "http://117.51.156.132:8080/upload/rename",
                            params
                        ).then(res => {
                            if (res.data.code == 500) {
                                location.href = "/error/500.html";
                            }
                            if (res.data.code != 200) {
                                alert("提交失败")
                            }
                        })
                    }
                    let data = {
                        "cwid": cwid,
                        "cwname": this.coursewarename,
                        "category": this.selected,
                        "cover": this.imgUrl,
                        "format": tempformat,
                        "duration": this.time,
                        "description": this.description,
                        "isDownload": this.isDownload
                    }
                    axios.post(
                        "/course/courseware/update", data, {
                            headers: {
                                'Content-Type': 'application/json;charset=UTF-8',
                                "token": token,
                                "refreshToken": refreshToken
                            },
                        }
                    ).then(res => {
                        if (res.data.code == 500) {
                            location.href = "/error/500.html";
                        }
                        if (res.data.code == 200) {
                            layui.use(['layer', 'form'], function() {
                                var layer = layui.layer,
                                    form = layui.form;
                                layer.alert("修改成功")
                            })
                        }
                    })
                },
                findover() {
                    let data = {
                        "cwid": cwid
                    }
                    axios.post(
                        "/course/courseware/findCoursewareByCwid", data, {
                            headers: {
                                'Content-Type': 'application/json;charset=UTF-8',
                                "token": token,
                                "refreshToken": refreshToken
                            },
                        }).then(res => {
                        if (res.data.code == 500) {
                            location.href = "/error/500.html";
                        }
                        if (res.data.code == 200) {
                            console.log(res.data);
                            this.coursewarename = res.data.data.cwname;
                            this.selected = res.data.data.category;
                            var temp = res.data.data.format
                            this.fileName = this.coursewarename + "." + temp;
                            this.filepath = "http://117.51.156.132/file/" + this.fileName;
                            document.getElementById("tre").style.display = "table-row";
                        }
                    })
                },
                delfile() {
                    alert("点击")
                    document.getElementById("tre").style.display = "none";
                }

            }
        })

        var file;

        function filesize(ele) {
            var filesize = (ele.files[0].size / 1024 / 1024).toFixed(2);
            $('#big').html(filesize + "MB");
            $('#text').html(ele.files[0].name);
            file = ele.files[0];
            //获取一个指向该元素的地址
            var path = window.URL.createObjectURL(file);
            console.log(path);
        }

        $(document).ready(function(e) {
            var progress = $(".progress");
            var progress_bar = $(".progress-bar");
            var percent = $('.percent');
            $("#del").click(function() {
                var objFile = document.getElementsByTagName('input')[2];
                objFile.value = "";
                $("#list").hide();
            });
            $("#uploadphoto").change(function() {
                $("#list").show();
            });
            $("#ups").click(function() {

                if (file != "") {
                    var formData = new FormData();
                    formData.append("file", file);
                    $.ajax({
                        url: "http://117.51.156.132:8080/upload/UploadAction",
                        data: formData,
                        type: "post",
                        //这两个属性必须设置！！！！
                        contentType: false,
                        processData: false,
                        success: function(data) {
                            if (data.code == 200) {
                                alert("添加成功！")
                                $('#uped').html("上传成功");
                                app.$data.fileName = data.name;
                                app.$data.filepath = "http://117.51.156.132/file/" + data.name;
                                document.getElementById("tre").style.display = "table-row";
                                app.$data.coursewarename = data.name.split(".")[0];
                                tempName = data.name.split(".")[0];
                                tempformat = data.name.split(".")[1];
                            } else {
                                $(".res").html("添加失败");
                                alert("添加失败！")
                            }
                        },
                        error: function(xhr) { //上传失败 
                            alert("上传失败");
                        }
                    })
                } else {
                    alert("请选择文件")
                };
            })
        });
    </script>
</body>

</html>